<template>
	<view class="bg-white">
		<view class="flex align-center justify-center font-weight-bold w-100 py-2 bg-white">
			<view class="mx-4" @click="changeTab(index)" v-for="(item,index) in tabBars" :key="index" :class="tabIndex === index ? 'text-main text-underline font-md' : 'text-light-muted'">
				{{item.name}}
			</view>
		</view>
		<swiper :current="tabIndex" :duration="150" :style="'height:'+scrollH+'px;'" @change="onChangeTab">
			<!-- 充值 -->
			<swiper-item>
				<uni-list class="text-left" :border="false">
					<uni-list-item title="支付宝" note="2019.05.12">
						<template slot="footer">
							<view class="flex flex-column align-end">
								<text class="text-red font-md text-bold">+200.00</text>
								<text class="text-gray-normal mt-2">成功</text>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item title="微信" note="2019.05.12">
						<template slot="footer">
							<view class="flex flex-column align-end">
								<text class="text-red font-md text-bold">+100.00</text>
								<text class="text-gray-normal mt-2">成功</text>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</swiper-item>
			<!-- 提现 -->
			<swiper-item>
				<uni-list class="text-left" :border="false">
					<uni-list-item title="支付宝" note="2019.05.12">
						<template slot="footer">
							<view class="flex flex-column align-end">
								<text class="text-black font-md text-bold">-2000.00</text>
								<text class="text-gray-normal mt-2">审核中</text>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item title="支付宝" note="2019.05.12">
						<template slot="footer">
							<view class="flex flex-column align-end">
								<text class="text-black font-md text-bold">-100.01</text>
								<text class="text-gray-normal mt-2">成功</text>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</swiper-item>
			<!-- 支出 -->
			<swiper-item>
				<uni-list class="text-left" :border="false">
					<uni-list-item title="张娟" note="2分钟16秒">
						<template slot="header">
							<image class="slot-image" src="@/static/default.jpg"></image>
						</template>
						<template slot="footer">
							<view class="flex flex-column align-end">
								<text class="text-black font-md text-bold">-20.00</text>
								<text class="text-gray-normal mt-2">2019.05.12</text>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item title="王德刚" note="1分钟16秒">
						<template slot="header">
							<image class="slot-image" src="@/static/default.jpg"></image>
						</template>
						<template slot="footer">
							<view class="flex flex-column align-end">
								<text class="text-black font-md text-bold">-12.00</text>
								<text class="text-gray-normal mt-2">2019.05.12</text>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollH: 500,
				tabIndex: 0,
				tabBars: [{
					name: "充值"
				}, {
					name: "提现"
				}, {
					name: "支出"
				}],
			}
		},
		onLoad(e) {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight;
				}
			});
		},
		methods: {
			// 切换选项卡
			changeTab(index) {
				this.tabIndex = index
			},
			// 滑动
			onChangeTab(e) {
				this.tabIndex = e.detail.current
			},
		}
	}
</script>

<style>
	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 16rpx;
		margin-top: 8rpx;
		width: 72rpx;
		height: 72rpx;
	}
</style>
